My meme

This meme pokes fun at me. I make the occasional typo and it messes everything up, giving me a big pile of errors. And it’s a little bit meta: the console screenshot is an actual screenshot of my own RStudio in the early stages of “meme.R”.

# behold, R code for my meme.

library(magick)

# color variables in one place
top_colour <- "hsl(0, 0, 97%)"
mid_colour <- "hsl(215, 35%, 93%)"
heading_colour <- "hsl(0, 0, 15%)"
subheading_colour <- "hsl(215, 20%, 20%)"
border_colour <- "hsl(260, 40%, 30%)"


#generate top section (the title)
top_section <- image_blank(width = 700, height = 100, color = top_colour) %>%
  image_annotate(text = "who would win?", color = heading_colour,
                 size = 40, font = "SF Pro Display", weight = 700, gravity = "center")


#generate left side content
left_text <- image_blank(width = 345, height = 100, color = mid_colour) %>%
  image_annotate(text = "decades of development in the\ncomputer and data sciences", color = subheading_colour,
                 size = 20, font = "SF Pro Display", weight = 700, gravity = "center")

left_image <- image_read("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/CERN_Server_03.jpg/640px-CERN_Server_03.jpg") %>%
  image_scale(345)


#generate right side content
right_text <- image_blank(width = 345, height = 100, color = mid_colour) %>%
  image_annotate(text = "one random teenager forgetting\na comma in their code", color = subheading_colour,
                 size = 20, font = "SF Pro Display", weight = 700, gravity = "center")

right_image <- image_read("https://aqq.xyz/content/stats220_meme_image.png") %>%
  image_scale(345)


#generate the little divider in the middle
dividing_line <- image_blank(width = 10, height = 330, color = border_colour)


#combine the text and the images on either side
left_section <- image_append(c(left_text, left_image), stack = TRUE)
right_section <- image_append(c(right_text, right_image), stack = TRUE)

#combine the left/right sections again into the "bottom section"
bottom_section <- image_append(c(left_section, dividing_line, right_section))


#combine the top and bottom sections to make the final meme
meme <- c(top_section, bottom_section) %>%
  image_append(stack = TRUE) %>%
  image_scale(800)

meme

image_write(meme, "content/my_meme.png")

My animated GIF

This GIF is a short, fun sequence of a “rollercoaster” (affectionately named the R-ollercoaster) going up and down against an animated gradient background. It’s open to interpretation - maybe it’s a representation of the ups and downs of learning a new programming language, or maybe it’s just here to look pretty. Either way, I like watching it go.

library(magick)

# defining colour variables (mostly for the 25 colour gradient)
gradient1 <- "hsl(215, 65%, 65%)"
gradient2 <- "hsl(235, 65%, 65%)"
gradient3 <- "hsl(255, 65%, 65%)"
gradient4 <- "hsl(275, 65%, 65%)"
gradient5 <- "hsl(295, 65%, 65%)"
gradient6 <- "hsl(315, 65%, 65%)"
gradient7 <- "hsl(335, 65%, 65%)"
gradient8 <- "hsl(355, 65%, 65%)"
gradient9 <- "hsl(15, 65%, 65%)"
gradient10 <- "hsl(35, 65%, 65%)"
gradient11 <- "hsl(55, 65%, 65%)"
gradient12 <- "hsl(75, 65%, 65%)"
gradient13 <- "hsl(95, 65%, 65%)"
gradient14 <- "hsl(115, 65%, 65%)"
gradient15 <- "hsl(135, 65%, 65%)"
gradient16 <- "hsl(155, 65%, 65%)"
gradient17 <- "hsl(170, 65%, 65%)"
gradient18 <- "hsl(185, 65%, 65%)"
gradient19 <- "hsl(200, 65%, 65%)"
gradient20 <- "hsl(205, 65%, 65%)"
gradient21 <- "hsl(205, 75%, 75%)"
gradient22 <- "hsl(205, 85%, 85%)"
gradient23 <- "hsl(205, 95%, 95%)"
gradient24 <- "hsl(205, 75%, 75%)"
gradient25 <- "hsl(205, 65%, 65%)"

text_colour <- "hsl(0, 95%, 95%"


# importing rollercoaster asset
rollercoaster_image <- image_read("https://aqq.xyz/content/stats220_rollercoaster.png") %>%
  image_scale(200)


# creating all 25 frames
frame1 <- image_blank(width = 800, height = 500, color = gradient1) %>%
  image_composite(rollercoaster_image, offset = "+0+70")

frame2 <- image_blank(width = 800, height = 500, color = gradient2) %>%
  image_composite(rollercoaster_image, offset = "+30+80")

frame3 <- image_blank(width = 800, height = 500, color = gradient3) %>%
  image_composite(rollercoaster_image, offset = "+50+100")

frame4 <- image_blank(width = 800, height = 500, color = gradient4) %>%
  image_composite(rollercoaster_image, offset = "+70+120")

frame5 <- image_blank(width = 800, height = 500, color = gradient5) %>%
  image_composite(rollercoaster_image, offset = "+90+160")

frame6 <- image_blank(width = 800, height = 500, color = gradient6) %>%
  image_composite(rollercoaster_image, offset = "+110+230")

frame7 <- image_blank(width = 800, height = 500, color = gradient7) %>%
  image_composite(rollercoaster_image, offset = "+130+300")

frame8 <- image_blank(width = 800, height = 500, color = gradient8) %>%
  image_composite(rollercoaster_image, offset = "+160+350")

frame9 <- image_blank(width = 800, height = 500, color = gradient9) %>%
  image_composite(rollercoaster_image, offset = "+190+390")

frame10 <- image_blank(width = 800, height = 500, color = gradient10) %>%
  image_composite(rollercoaster_image, offset = "+230+400")

frame11 <- image_blank(width = 800, height = 500, color = gradient11) %>%
  image_composite(rollercoaster_image, offset = "+270+400")

frame12 <- image_blank(width = 800, height = 500, color = gradient12) %>%
  image_composite(rollercoaster_image, offset = "+300+380")

frame13 <- image_blank(width = 800, height = 500, color = gradient13) %>%
  image_composite(rollercoaster_image, offset = "+330+350")

frame14 <- image_blank(width = 800, height = 500, color = gradient14) %>%
  image_composite(rollercoaster_image, offset = "+350+300")

frame15 <- image_blank(width = 800, height = 500, color = gradient15) %>%
  image_composite(rollercoaster_image, offset = "+370+240")

frame16 <- image_blank(width = 800, height = 500, color = gradient16) %>%
  image_composite(rollercoaster_image, offset = "+400+160")

frame17 <- image_blank(width = 800, height = 500, color = gradient17) %>%
  image_composite(rollercoaster_image, offset = "+430+100")

frame18 <- image_blank(width = 800, height = 500, color = gradient18) %>%
  image_composite(rollercoaster_image, offset = "+460+70")

frame19 <- image_blank(width = 800, height = 500, color = gradient19) %>%
  image_composite(rollercoaster_image, offset = "+500+50")

frame20 <- image_blank(width = 800, height = 500, color = gradient20) %>%
  image_composite(rollercoaster_image, offset = "+530+40")

frame21 <- image_blank(width = 800, height = 500, color = gradient21) %>%
  image_composite(rollercoaster_image, offset = "+560+40")

frame22 <- image_blank(width = 800, height = 500, color = gradient22) %>%
  image_composite(rollercoaster_image, offset = "+590+50")

frame23 <- image_blank(width = 800, height = 500, color = gradient23) %>%
  image_composite(rollercoaster_image, offset = "+620+70")

frame24 <- image_blank(width = 800, height = 500, color = gradient24) %>%
  image_composite(rollercoaster_image, offset = "+650+100")

frame25 <- image_blank(width = 800, height = 500, color = gradient25) %>%
  image_composite(rollercoaster_image, offset = "+670+140")


# throwing these frames into a vector
frames <- c(frame1, frame2, frame3, frame4, frame5, frame6, frame7, frame8, frame9, frame10, 
            frame11, frame12, frame13, frame14, frame15, frame16, frame17, frame18, frame19,
            frame20, frame21, frame22, frame23, frame24, frame1)


#creating the animation (with a high frame rate) and exporting etc
animation <- image_morph(frames, frames = 8) %>%
  image_animate(fps = 50)

animation

image_write(animation, "content/my_animation.gif")

CSS:

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');


/* Some color variables */

:root{
  --bg: hsl(260, 5%, 98%);
  --greyBg: hsl(220, 15%, 90%);
  
  --darkText: hsl(0, 0%, 20%);
  
  --lightText: hsl(330, 5%, 55%);
  --accentText: hsl(330, 70%, 45%);
}

*{
  background-color: var(--bg);
}


/* Keeps the body centered and reduces its width to improve readability */

body {
  margin: 0 auto;
  
  width: 75%;
  max-width: 850px;
  
  background-color: inherit;
  
  font-family: Outfit, sans-serif;
  font-size: 16px;
  color: var(--darkText);
}


/* Bold headings with modified spacing */

h1{
  margin-bottom: 5px;
  
  font-weight: 700;
  line-height: 1;
}

h2{
  margin-top: 8%;
  
  font-weight: 700;
}


/* Different (default) font for paragraph text */

p{
  font-family: sans-serif;
}


/* Slightly reduces the width of the image and code blocks and adds a small border around the image */

img{
  margin: 30px auto;
  display: block;
  width: 90%;
  
  padding: 10px;
  
  background-color: var(--greyBg);
  border-radius: 15px;
  
}

pre{
  margin: 50px auto;
  width: 90%;
}


/* Font weight / colour hierarchy in the header */

#header{
  margin-top: 15%;
}

.title{
  color: var(--accentText);
}

.subtitle{
  margin-top: 0;
  margin-bottom: 20px;
  
  color: var(--lightText);
}

.author{
  font-weight: 700;
}

.author, .date{
  margin-top: 5px;
  margin-bottom: 5px;
  
  text-align: right;
}